<template>
  <div>
    <div
      v-for="(item, index) in dataList"
      :key="index"
      class="shop-list mar-b-20 pad-t-12 flex bgc-white"
    >
      <div class="infos pad-l-19 cursor-p" @click="shopDetail(item.supplierId)">
        <div class="flex v-align-c">
          <span class="font-16 font-w">{{ item.shopName }}</span>
          <div class="years mar-l-10 pad-l-1 pad-r-1" v-if="item.virtualYears">
            {{ parseInt(item.virtualYears) }}年店
          </div>
        </div>
        <div class="flex v-align-c pad-t-11">
          <span class="mar-r-6 font-12">综合服务</span>
          <div class="rate flex v-align-c">
            <span
              v-for="(itemRate, indexRate) in parseInt(item.virtualLevel)"
              :key="indexRate"
            />
          </div>
        </div>
        <div class="line mar-t-17 mar-b-10" />
        <div class="shop-data">
          <ul>
            <li>商品数量：{{ item.goodsNum ? item.goodsNum : 0 }}款</li>
            <li>经营范围：{{ item.categoryNames }}</li>
            <li>货 源 地 ：{{ item.sourceOfGoods }}</li>
            <li>
              更新时间：{{
                item.updateTime ? item.updateTime : item.createTime
              }}
            </li>
            <li>
              年 销 量 ：<span class="font-price">{{ item.saleNum }}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="flex mar-r--28">
        <div
          v-for="(itemGoods, indexGoods) in item.goodsList"
          :key="indexGoods"
          class="goods-bar mar-r-28 mar-b-3 cursor-p"
          @click="goodsEls(itemGoods.goodsId)"
        >
          <el-image class="image" :src="itemGoods.imageUrl" lazy />
          <div class="goods-info font-white">
            <div class="flex flex-between font-color-6">
              <div class="_line-1">{{ itemGoods.title }}</div>
            </div>
            <div class="flex flex-between v-align-c pad-t-6">
              <div class="price font-price font-14">
                ￥{{ itemGoods.distributePrice }}
              </div>
              <div class="font-14 font-color-9">
                已售{{ itemGoods.saleNum ? itemGoods : 0 }}件
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { jumpPage } from "@/utils/jumpPageUtils";
export default defineComponent({
  name: "ShopList",
  props: {
    shopList: Object,
  },
  setup(props) {
    const dataList = ref([]);
    dataList.value = props.shopList;
    watch(
      () => props.shopList,
      (newVal, oldVal) => {
        dataList.value = newVal;
      }
    );
    const router = useRouter();
    const shopList = ref(<any>[]);
    onMounted(() => {});
    const shopDetail = (supplierId: string) => {
      router.push({
        path: "/shop/detail",
        query: {
          shopId: supplierId,
        },
      });
    };
    const goodsEls = (goodsId: string) => {
      jumpPage(router, 1, 1, 2001, "?goodsId=" + goodsId, 1);
    };

    return {
      dataList,
      shopDetail,
      goodsEls,
    };
  },
});
</script>

<style lang="scss" scoped>
$darkBlue: #182245;
$recommendGoodsWidth: 200px;

.shop-list {
  border: #e4e4e4 1px solid;

  .infos {
    padding-top: 41px;
    width: 485px;
    box-sizing: border-box;

    .years {
      background: #fbde2d;
      border: #e3c71c 1px solid;
      color: #5c2800;
      font-size: 12px;
    }

    .rate {
      width: 75px;
      height: 14px;
      background: url("@/assets/images/icon_start_all.png") no-repeat;

      span {
        display: block;
        width: 15px;
        height: 14px;
        background: url("@/assets/images/icon_start_1.png") no-repeat;
      }
    }

    .line {
      width: 320px;
      height: 1px;
      background: #e5e5e5;
    }

    .shop-data {
      ul {
        &:after {
          content: "";
          display: block;
          clear: both;
          font-size: 0;
        }

        li {
          width: 183px;
          float: left;
          padding: 6px 0;
        }
      }
    }
  }

  .goods-bar {
    width: $recommendGoodsWidth;
  }

  .el-image {
    width: $recommendGoodsWidth;
    height: 214px;
    cursor: pointer;
    display: block;
  }

  .goods-info {
    width: $recommendGoodsWidth;
    // height: 142px;
    padding: 8px 0 8px 0;
    box-sizing: border-box;
  }

  ._line-1 {
    /* line-height: 1.4; */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }
}
</style>
